<template>
    <div>
        <!--model:表单数据-->
        <el-form  label-width="80px" :model="userForm"  :rules="rules" ref="formref">
            <el-form-item label="昵称" prop="loginName">
                <el-input v-model="userForm.loginName" prop="loginName"></el-input>
            </el-form-item>
            <el-form-item label="账号" prop="userName">
                <el-input v-model="userForm.userName" prop="userName"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="userForm.sex" placeholder="请选择">
                <el-option
                        label="男"
                        value="0">
                </el-option>
                    <el-option
                            label="女"
                            value="1">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phonenumber">
                <el-input v-model="userForm.phonenumber"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="remark">
                <el-input v-model="userForm.remark"></el-input>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="changestatus()">取 消</el-button>
                <el-button type="primary" @click=" confirmEditUser()">确 定</el-button>
        </span>

    </div>
</template>

<script>
    export default {
        name: "UserAddOrupdata",
        props:["userId","status"],
        model:{
            prop:'status',
            event:'changestust'

        },
        data(){
            //手机号校验
            //手机号验证
            var validatorPhone = function (rule, value, callback) {
                if (value === '') {
                    callback(new Error('手机号不能为空'))
                } else if (!/^1\d{10}$/.test(value)) {
                    callback(new Error('手机号格式错误'))
                } else {
                    callback()
                }
            }
            //唯一性校验
            var same={id:'',same:''}
            var that=this
            var id=this.userId
            //唯一性校验
            var validatorusername=function (rule, value, callback) {
                same.id=that.userId;
                same.same = value;
                that.$http.post(`/system/user/onlyonecheck/byname`,same).then(function (response) {
                    console.log(response.data)
                    if (response.data.result.type) {
                        callback();
                    } else {
                        callback("用户名重复");
                    }

                });
            }
            return{
                Id:this.userId,
                userForm: {username:'',
                    email:''
                },
                rules:{
                    userName: [
                        { required: true, message: '账号不为空', trigger: 'blur' },
                        { min: 2, message: '最少两个字符', trigger: 'blur' },
                        { validator: validatorusername, trigger: 'blur' ,},
                    ],
                    loginName: [
                        { required: true, message: '昵称', trigger: 'blur' ,},
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },


                    ],
                    email:[ { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
                    phonenumber:[{ required: true,  validator: validatorPhone, trigger: 'blur'  },]
                }
            }


        },

        created() {
            this.getuserinfo();
        },

        methods:{
            changestatus(){
                this.$emit('changestust',!this.status)
            },
            confirmEditUser() {

                var that = this;
                //表格所有校验
               this.$refs.formref.validate((valid)=>{
                    if (valid) {
                        this.$http.post('system/user/addorupadte',this.userForm).then(function (response) {
                            that.$message.success(response.data.message);
                            that. changestatus()
                        })
                        location.reload()
                    }
                })

            },
            getuserinfo(){
                console.log(this.userId+"????????????")
                if (this.userId == ''||this.userId == undefined) {

                }else
                {
                    var that=this;
                    this.userId;
                    this.$http.get(`system/user/getuserbyid/${ this.userId}`).then(function (response) {
                        that.userForm = response.data.result.userinfo;
                    });
                }

    }
        }
    }
</script>

<style scoped>

</style>